<!-- 数据字典 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form ref="form" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="83px">
        <el-form-item label="数据名称:" prop="hospitalCode">
          <el-input prefix-icon="el-icon-search" v-model="formData.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="数据类型:" prop="hospitalCode">
          <el-select size="small" class="param-type_input" v-model="formData.level" placeholder="请选择">
            <el-option
              v-for="(item,index) in levelOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间:">
          <el-date-picker
            v-model="formData.timeRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="m-l-0 click-button" size="small" @click="search">查询</el-button>
          <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <div class="content-title">
        <span>数据字典列表</span>
        <el-button class="add-button" v-if="$store.state.app.permission" type="primary" size="small" @click="handleAdd"><i class="el-icon-plus icon"></i>添加</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        size="medium"
        :data="tableData"
        row-key="id"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="left" prop="operate" label="操作" width="310px">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button @click="addChildren(scope.row)" v-if="scope.row.level === 1">添加子数据</el-button>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="left" prop="name" label="数据名称"></el-table-column>
        <el-table-column align="left" prop="code" label="字典CODE"></el-table-column>
        <el-table-column align="left" prop="num" label="序号"></el-table-column>
        <el-table-column align="left" prop="hospital" label="医院"></el-table-column>
        <el-table-column align="left" prop="depArea" label="影像区域"></el-table-column>
        <el-table-column align="left" prop="dep" label="检查部门"></el-table-column>
        <el-table-column align="left" prop="modality" label="设备"></el-table-column>
        <el-table-column align="left" prop="createTime" label="添加时间"></el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="changePagination"
      />
    </el-card>
    <transition name="fade-form" mode="out-in">
      <div :class="{'toolBox-small':device !== 'mobile' && sidebar.opened,'toolBox-midul' :device !== 'mobile' && !sidebar.opened,'toolBox-large' :device == 'mobile','toolBox':true}" v-show="showToolBox">
        <div>
          <i class="el-icon-info icon blue-color"></i>
          <span class="toolBox-text">已选择<span class="blue-color">{{multipleSelection.length}}</span>项</span>
          <span class="cancle-click" @click="cancleChoose">取消选择</span>
        </div>
        <div>
          <el-button type="primary" size="small" @click="batchDelete">批量删除</el-button>
        </div>
      </div>
    </transition>
    <editRoom :show-right.sync="showRight" :cur-status="curStatus" :row-data.sync="rowData" @refresh="search"></editRoom>
  </div>
</template>

<script>
import paginationCont from '@/components/Pagination/index'
import editRoom from './editRoom'
import { PageStatus } from '@/utils/constant'
export default {
  name: '',
  mixins: [],
  components: { paginationCont, editRoom },
  data() {
    return {
      pageStatus: PageStatus,
      formData: {
        name: '',
        level: '',
        timeRange: []
      },
      tableData: [
        {
          id: '111',
          name: '病人类型',
          code: 'BRLX',
          num: 'A01',
          hospital: '温州市佑安医院',
          depArea: '本院',
          dep: 'CT',
          modality: 'CT',
          createTime: '2021/05/21',
          level: 1,
          children: [
            {
              id: '111222',
              name: '门诊',
              code: 'BRLX',
              num: 'B01',
              hospital: '温州市佑安医院',
              depArea: '本院',
              dep: 'CT',
              modality: 'CT',
              createTime: '2021/05/21',
              level: 2
            },
            {
              id: '1113333',
              name: '住院',
              code: 'BRLX',
              num: 'B01',
              hospital: '温州市佑安医院',
              depArea: '本院',
              dep: 'CT',
              modality: 'CT',
              createTime: '2021/05/21',
              level: 2
            }
          ]
        },
        {
          name: '性别',
          code: 'BRLX',
          num: 'A03',
          hospital: '温州市佑安医院',
          depArea: '本院',
          dep: 'MRI',
          modality: 'MRI',
          createTime: '2021/05/21',
          level: 1
        }
      ],
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      showToolBox: false,
      multipleSelection: [],
      depAreaOptions: [],
      scheduledModalityOptions: [],
      scheduledDepOptions: [],
      callRoomOptions: [],
      levelOptions: [
        {
          value: 1,
          label: '一级'
        },
        {
          value: 2,
          label: '二级'
        }
      ],
      showRight: false,
      curStatus: '',
      rowData: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    multipleSelection(val) {
      if (val && val.length > 1) {
        this.showToolBox = true
      } else {
        this.showToolBox = false
      }
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancleChoose() {
      // 取消选择
      this.multipleSelection = []
      this.$refs.table.clearSelection()
    },
    batchDelete() {
      /* 批量删除 */
      this.cancleChoose()
    },
    handleEdit(row) {
      this.showRight = true
      this.curStatus = this.pageStatus.edit
      this.rowData = row
    },
    handleDelete(id) {

    },
    addChildren(row) {
      /* 添加子数据 */
      this.showRight = true
      this.curStatus = this.pageStatus.edit
      this.rowData = {
        level: 2,
        parentId: row.id
      }
    },
    handleAdd() {
      this.showRight = true
      this.curStatus = this.pageStatus.add
    },
    resetParam() {
      // 重置
      this.formData = {
        hospitalName: '',
        provincesCode: [],
        city: [],
        county: []
      }
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
        //   this.fetchData()
        }
      })
    },
    changePagination() {
      this.$refs.form.validate((valid) => {
        if (valid) {
        //   this.fetchData()
        }
      })
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .content-title{
        margin-bottom: 10px;
        span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
        }
        .add-button{
            width: 96px;
            height: 32px;
            margin-left: 16px;
        }
    }
}
.ky-form-inline-sm .el-form-item /deep/ .el-input__inner{
    width: 260px;
}
</style>
